<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<style>
<!--
.userGroup-item-selected {
  color: #ffffff !important;
}
-->
</style>
<div id="userGroup-select-dialog" style="display:none;padding:10px;">
  <h4>选择</h4>
  <div style="height:200px">
    <div style="width:44%;" class="pull-left">
      <ul id="userGroup-select-tree" class="ztree"></ul>
    </div>
    <div style="width:46%;" class="pull-left">
      <h4><i class="icon-group"></i>&nbsp;&nbsp;群组</h4>
      <div>
        <ul class="inline" id="userGroup-subGroups"> 
        </ul>
      </div>      
      <h4><i class="icon-user"></i>&nbsp;&nbsp;成员</h4>
      <div>
        <ul class="inline" id="userGroup-subMembers">
        </ul>
      </div>
    </div>
  </div>
  <hr>
  <div >选中组：
    <ul class="inline" id="userGroup-selectedGroups"></ul>
  </div>
  <div>选中成员：
    <ul class="inline" id="userGroup-selectedMembers"></ul>
  </div>
  <hr>
  <p class="text-center">
      <button id="userGroup-select-confirm" type="button" class="btn btn-info"><s:message code="btn.confirm" /></button>
      <button id="userGroup-select-cancel" type="button" class="btn"><s:message code="btn.cancel" /></button> 
  </p>
</div>
<script type="text/javascript">
var __userGroup_select_dialog = null;
var __selectUserGroupIds = new Array();
var __selectUserIds = new Array();

function openSelectUserGroupTreeDialog(__selected_groups,__selected_members)
{
  $("#userGroup-selectedGroups").empty();
  $("#userGroup-selectedMembers").empty();
  __selectUserGroupIds = new Array();
  __selectUserIds = new Array();
  
  
     $.webtools.ajax({
            isShowLoading:false,
        url: "${contextPath}/system/userGroup/getGroupsById.json",
        params: {"groupIds":__selected_groups},
        success: function(data) {
           $.each(data, function(i, obj){
             var objId=obj.id;
             var id=objId.toString();
             var selectedGroup = $("<a class='selectedGroup' id='selectedGroup"+obj.id+"' data-id='"+obj.id+"'>"+ obj.name +"<i class='icon-remove-2'></i></a>");
               $("<li></li>").append(selectedGroup).appendTo("#userGroup-selectedGroups");
               
               __selectUserGroupIds.push(id);
                    
                    $("#selectedGroup"+id).click(function(){              
                      var id = $(this).attr("data-id");
                      var selectGroup = $("#selectGroup"+id);   
                      selectGroup.removeClass("userGroup-item-selected");
                      selectGroup.removeAttr("data-selected");
                      selectGroup.prev().remove();
                      selectGroup.parent().css("background-color","#D9EDF7");
                      $(this).parent().remove();
                      
                      __selectUserGroupIds.splice($.inArray(id,__selectUserGroupIds),1);
                    });
             });
           }
        });
   
     $.webtools.ajax({
            isShowLoading:false,
        url: "${contextPath}/common/user/getUsersById.json",
        params: {"userIds":__selected_members},
        success: function(data) {
           $.each(data, function(i, obj){
            var objId=obj.id;
            var id=objId.toString();
              var selectedMember = $("<a class='selectedGroup' id='selectedMember"+obj.id+"' data-id='"+obj.id+"'>"+ obj.userName +"<i class='icon-remove-2'></i></a>");
                 $("<li></li>").append(selectedMember).appendTo("#userGroup-selectedMembers");
                 __selectUserIds.push(id);
                    
                    $("#selectedMember"+id).click(function(){             
                      var id = $(this).attr("data-id");
                      var selectMember = $("#selectMember"+id);   
                      selectMember.removeClass("userGroup-item-selected");
                      selectMember.removeAttr("data-selected");
                      selectMember.prev().remove();
                      selectMember.parent().css("background-color","#D9EDF7");
                      $(this).parent().remove();
                      
                      __selectUserIds.splice($.inArray(id,__selectUserIds),1);
                    });
             });
           }
     });
   
  __userGroup_select_dialog = layer.open({
    type: 1,
    title: false,
    area: ['600px', '450px'],
    skin: 'layui-layer-rim', //加上边框
    shadeClose: true,
    fix: false,
    content: $('#userGroup-select-dialog')
  });
}

function selectUserGroupTreeOnClick(event, treeId, treeNode) {
    var id = treeNode.id;
    //异步获取该组织下的所有群组和成员列表
    $("#userGroup-subGroups").empty();
    $("#userGroup-subMembers").empty();
    $.webtools.ajax({
        isShowLoading:false,
    url: "${contextPath}/system/userGroup/getAllSubGroups.json",
    params: {"parentId":id},
    success: function(data) {
      var html = "";
      $.each(data, function(i, obj){
        //如果对象已被选中，则渲染成选中状态
        var selectedGroup = $("#selectedGroup"+obj.id);
        if(selectedGroup.length > 0)
        {
          html += "<li style='background-color:#337AB7;margin-right:10px;margin-bottom:4px;'><i class='icon-check white'></i><a href='javascript:;' class='selectGroup userGroup-item-selected' id='selectGroup"+obj.id+"' data-id='"+obj.id+"' data-type='group' data-selected='1'>"+ obj.name + "</a></li>";
        }
        else
        {
          html += "<li style='background-color:#D9EDF7;margin-right:10px;margin-bottom:4px;'><a href='javascript:;' class='selectGroup' id='selectGroup"+obj.id+"' data-id='"+obj.id+"' data-type='group'>"+ obj.name + "</a></li>";  
        }
      });  
      $("#userGroup-subGroups").append(html);
      
      
      $(".selectGroup").click(function(){       
            $this = $(this);
            var isSelected = $this.attr("data-selected");
            if(!isSelected)
            {
              var name = $this.text();
              var id = $this.attr("data-id");
              var type = $this.attr("data-type");
              $this.before("<i class='icon-check white'></i>");
              //$this.css("color", "#fff");
              $this.addClass("userGroup-item-selected");
              $this.parent().css("background-color","#337AB7");
              $this.attr("data-selected", "1");
              var selectedGroup = $("<a class='selectedGroup' id='selectedGroup"+id+"' data-id='"+id+"'>"+ name +"<i class='icon-remove-2'></i></a>");
              $("<li></li>").append(selectedGroup).appendTo("#userGroup-selectedGroups");
              
              __selectUserGroupIds.push(id);
              
              $("#selectedGroup"+id).click(function(){              
                var id = $(this).attr("data-id");
                var selectGroup = $("#selectGroup"+id);   
                selectGroup.removeClass("userGroup-item-selected");
                selectGroup.removeAttr("data-selected");
                selectGroup.prev().remove();
                selectGroup.parent().css("background-color","#D9EDF7");
                $(this).parent().remove();
                __selectUserGroupIds.splice($.inArray(id, __selectUserGroupIds), 1);
              });
            }   
          });
      
    }
  }); 
    $.webtools.ajax({
      isShowLoading:false,
    url: "${contextPath}/system/userGroup/getAllSubGroupMembers.json",
    params: {"parentId":id},
    success: function(data) {
      var html = "";
      $.each(data, function(i, obj){
        //如果对象已被选中，则渲染成选中状态
        var selectedMember = $("#selectedMember"+obj.id);
        if(selectedMember.length > 0)
        {
          html += "<li style='background-color:#337AB7;margin-right:10px;margin-bottom:4px;'><i class='icon-check white'></i><a href='javascript:;' class='selectMember userGroup-item-selected' id='selectMember"+obj.id+"' data-id='"+obj.id+"' data-type='member' data-selected='1'>"+ obj.userName + "</a></li>";
        }
        else
        {
          html += "<li style='background-color:#D9EDF7;margin-right:10px;margin-bottom:4px;'><a href='javascript:;' class='selectMember' id='selectMember"+obj.id+"' data-id='"+obj.id+"' data-type='member'>"+ obj.userName + "</a></li>";  
        }
      });  
      $("#userGroup-subMembers").append(html);
      $(".selectMember").click(function(){        
          $this = $(this);
          var isSelected = $this.attr("data-selected");
          if(!isSelected)
          {
            var name = $this.text();
            var id = $this.attr("data-id");
            var type = $this.attr("data-type");
            $this.before("<i class='icon-check white'></i>");
            //$this.css("color", "#fff");
            $this.addClass("userGroup-item-selected");
            $this.parent().css("background-color","#337AB7");
            $this.attr("data-selected", "1");
            var selectedMember = $("<a class='selectedGroup' id='selectedMember"+id+"' data-id='"+id+"'>"+ name +"<i class='icon-remove-2'></i></a>");
            $("<li></li>").append(selectedMember).appendTo("#userGroup-selectedMembers");
            
            __selectUserIds.push(id);
            
            $("#selectedMember"+id).click(function(){             
              var id = $(this).attr("data-id");
              var selectMember = $("#selectMember"+id);   
              selectMember.removeClass("userGroup-item-selected");
              selectMember.removeAttr("data-selected");
              selectMember.prev().remove();
              selectMember.parent().css("background-color","#D9EDF7");
              $(this).parent().remove();
              __selectUserIds.splice($.inArray(id, __selectUserIds), 1);
            });
          } 
        });
  }
}); 
};
  
function selectUserGroupTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    var node = treeObj.getNodeByParam("id", 0, null);
    treeObj.selectNode(node);
};            
  
  $(document).ready(function(){ 
    var setting = {
        data: {          
          simpleData: {
            enable: true
            ,idKey: "id"
            ,pIdKey: "parentId"
          }
        }
        ,callback: {
          onClick: selectUserGroupTreeOnClick
          ,onAsyncSuccess: selectUserGroupTreeOnAsyncSuccess
        }
        ,async: {
          enable: true,//启用异步加载
          url:"${contextPath}/system/userGroup/getTree.json", //异步请求地址
          autoParam:["id"], //需要传递的参数,为你在ztree中定义的参数名称
          dataFilter: function(treeId, parentNode, childNodes){
            for(var i=0;i<childNodes.length;i++)
            {
              var child = childNodes[i];
              if(child.type == 1)
                child.iconSkin = "building";
              else if(child.type==2)
                child.iconSkin = "department";
              else if(child.type==3)
                child.iconSkin = "group";
            }
            return childNodes;
          }
        }
    };
    
    var zNodes =[
      { id:0, pId:-1, name:"<s:message code='userGroup'/>", open:true, isParent:true, iconSkin:"home"}
    ]; 
    
    var treeObj = $.fn.zTree.init($("#userGroup-select-tree"), setting, zNodes);   
    var node = treeObj.getNodeByParam("id", 0, null);
    treeObj.reAsyncChildNodes(node, "refresh");
    
    $("#userGroup-select-confirm").click(function(){
      onSelectUserGroupTreeConfirm(__selectUserGroupIds, __selectUserIds);  //该方法由子页面实现
      layer.close(__userGroup_select_dialog);
    });
    
    $("#userGroup-select-cancel").click(function(){
      layer.close(__userGroup_select_dialog);
    });    
    
  });
</script>  
